import { useThemeStore } from '@/store'
import { watch } from 'vue'

export default function setupWindicssDarkMode() {
  const theme = useThemeStore()
  const DARK_CLASS = 'dark'

  function getHtmlElement() {
    return document.querySelector('html')
  }
  function addDarkClass() {
    const html = getHtmlElement()
    html?.classList.add(DARK_CLASS)
  }
  function removeDarkClass() {
    const html = getHtmlElement()
    html?.classList.remove(DARK_CLASS)
  }
  watch(
    () => theme.darkMode,
    (dark) => {
      if (dark) {
        addDarkClass()
      } else {
        removeDarkClass()
      }
    }
  )
}
